<template lang="pug">
    div
        Table(border :columns="columns" :data="data")
        br
        hr
        br
        Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" :label-position="left")
            FormItem
                Button(type="primary" style="margin-left:10px" @click="handleSubmit('formValidate')") 增加
            FormItem(label="姓名" prop="name")
                Input(v-model="formValidate.name" placeholder="请输入姓名" style="width:300px")
            FormItem(label="头像" prop="img")
                Upload(action="/api/imgUpload" :on-success="handleSuccess" :show-upload-list="false" :format="['jpg','jpeg','png']")
                    template(v-if="formValidate.img != ''")
                        img(type="ghost"  :src="'/public/img/' + formValidate.img" style="width:100px;height:100px;")
                    template(v-else)
                        Button(type="ghost" icon="ios-cloud-upload-outline") Upload Image
            FormItem(label="职位" prop="position")
                Input(v-model="formValidate.position" placeholder="请输入职位" style="width:300px")
            FormItem(label="介绍" prop="introduce")
                textarea(id="scientificConsultantEditor")
                //-Input(v-model="formValidate.introduce" placeholder="请输入介绍" style="width:300px") 
</template>
<script>
import tinymce from "tinymce";
export default {
    data() {
        return {
            formValidate: {
                name: "",
                img: "",
                position: "",
                introduce: ""
            },
            columns: [
                {
                    title: "姓名",
                    key: "name"
                },
                {
                    title: "头像",
                    key: "img",
                    render: (h, params) => {
                        return h("img", {
                            attrs: {
                                width: 80,
                                height: 80,
                                src: "/public/img/" + params.row.img,
                                style: "margin:5px"
                            }
                        });
                    }
                },
                {
                    title: "职位",
                    key: "position"
                },
                {
                    title: "介绍",
                    key: "introduce"
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params);
                                        }
                                    }
                                },
                                "Delete"
                            )
                        ]);
                    }
                }
            ],
            data: []
        };
    },
    methods: {
        show(index) {
            /*
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`
            })
            */
        },
        remove(params) {
            this.$Modal.confirm({
                title: "确认删除",
                content: "<p>确认删除吗？</p>",
                onOk: async () => {
                    var id = this.data[params.index].id;
                    await this.axios.delete("/api/scientificConsultant/" + id);
                    var res = (await this.axios.get(
                        "/api/scientificConsultant"
                    )).data.message.data;
                    this.data = res;
                    this.$Message.info("Clicked ok");
                },
                onCancel: () => {
                    this.$Message.info("Clicked cancel");
                }
            });
        },
        async handleSubmit(name) {
            this.formValidate.introduce = tinymce.activeEditor.getContent();
            var status = (await this.axios.post("/api/scientificConsultant", {
                data: this.formValidate
            })).data.status;
            if (status) {
                this.$Message.success("Success!");
                this.data.push(this.formValidate);
            } else {
                this.$Message.error("Fail!");
            }
        },
        handleSuccess(res) {
            this.formValidate.img = res.message.data.filename;
        }
    },
    async mounted() {
        var res = (await this.axios.get("/api/scientificConsultant")).data
            .message.data;
        this.data = res;
        tinymce.init({
            selector: "#scientificConsultantEditor",
            branding: false,
            elementpath: false,
            height: 400,
            language: "zh_CN.GB2312",
            menubar: "edit insert view format table tools",
            theme: "modern",
            plugins: [
                "imageupload advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools",
                "searchreplace visualblocks visualchars code fullscreen fullpage",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons paste textcolor colorpicker textpattern imagetools codesample"
            ],
            convert_urls: false,
            imageupload_url: "/api/imgUploadEditor",
            toolbar1:
                " imageupload newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link emoticons media codesample",
            autosave_interval: "20s",
            image_advtab: true,
            table_default_styles: {
                width: "60%",
                borderCollapse: "collapse"
            }
        });
    },
    destroyed() {
        tinymce.get("scientificConsultantEditor").destroy();
    }
};
</script>
